<template>
  <div style="font-size: 50px">
    <button @click="clickBtn">点击</button>
    <div>{{ gcVal }}</div>
  </div>
</template>

<script setup lang="ts">
import { ref, Ref, watch, shallowRef, triggerRef, customRef } from 'vue'
let message = ref({
  nav: {
    bar: {
      name: '6595'
    }
  }
})
let str: Ref<string | number | object> = ref('富哥')
let msg = ref<string | number>('sss')
let solleObj = shallowRef({
  name: 'ss'
})
const clickBtn = () => {
  gcVal.value = '牛逼'
  triggerRef(gcVal)
}
function myRef<T>(value: T) {
  return customRef((track, trigger) => {
    return {
      get() {
        track()
        return value
      },
      set(newVal: T) {
        console.log(newVal)
        value = newVal
        trigger()
      }
    }

  })

}
let gcVal = myRef<string>('sss')
console.log(message.value.nav.bar.name)
watch(str, (newVal, oldVal) => {
  console.log('新', newVal);
  console.log('旧', oldVal);
}, {
  immediate: true,
  deep: true
})

</script>

<style >
</style>
